<template>
	<view class="content">
		<view class="loginBtn">
			<button class="cu-btn bg-main-color margin-tb" @click="login">{{loginBtnText}}</button>
		</view>

		<tn-popup v-model="bottomPopupShow" mode="bottom" :borderRadius="borderRadius" :maskCloseable="false"
			:closeBtn="true" closeBtnIcon="cross-fill">
			<view class="fui-custom__wrap">
				<view class="fui-title">修改个人资料</view>
				<view>
					<tn-form :model="userInfo" ref="userInfo" :errorType="['message']">
						<tn-form-item label="头像" prop="avatarUrl">
							<tn-button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<tn-avatar v-if="userInfo.avatarUrl != null && userInfo.avatarUrl != ''" size="lg"
									shape="square" :border="true" :src="userInfo.avatarUrl">
								</tn-avatar>
								<tn-avatar v-else size="lg" shape="square" :border="true" fontSize="34"
									:text="userInfo.userName.substring(0, 1)"></tn-avatar>
							</tn-button>
						</tn-form-item>
						<tn-form-item label="昵称" prop="userName">
							<tn-input :customStyle="customStyle" v-model="userInfo.userName" type="nickname" />
						</tn-form-item>
						<!-- <tn-form-item label="性别" prop="sex">
							<tn-input v-model="userInfo.sex" type="select" @click="sexSelectShow = true"
								:selectOpen="sexSelectShow" />
							<tn-action-sheet v-model="sexSelectShow" :list="sexActionSheetList"
								:borderRadius="borderRadius" @click="chooseSex"></tn-action-sheet>
						</tn-form-item> -->
					</tn-form>
				</view>
				<view>
					<button class="button cu-btn lg bg-main-color margin-tb-xl margin-right-xl"><text
							class="button-text">确认修改</text></button>
					<button class="button cu-btn lg margin-tb-xl"><text class="button-text"
							@click="closePopup">暂不修改</text></button>
				</view>
			</view>
		</tn-popup>

	</view>
</template>

<script>
	import {
		wx_login,
		update,
		get
	} from '@/api/user.js'

	import {
		toast,
		clearStorageSync,
		getStorageSync,
		setStorageSync,
		useRouter
	} from '@/utils/utils.js'

	import fuiBottomPopup from "@/components/firstui/fui-bottom-popup/fui-bottom-popup.vue"

	let _this;

	export default {
		components: {
			fuiBottomPopup
		},
		data() {
			return {
				userInfo: {
					userId: '',
					wxOpenId: '',
					avatarUrl: '',
					userName: '',
					sex: '',
					flag: '',
				},
				borderRadius: 23,
				sexSelectShow: false,
				sexActionSheetList: [{
						value: '1',
						text: '男'
					},
					{
						value: '2',
						text: '女'
					},
					{
						value: '3',
						text: '保密'
					}
				],

				customStyle: {
					width: '260px'
				},

				provider: '',

				bottomPopupShow: false,
				paddingArr: ['0rpx', '32rpx'],
				modalName: 'bottomModalHide',
				loginBtnText: '点此一键登录',
				index: -1,

			}
		},
		created() {
			_this = this;
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					_this.provider = res.provider[0]
				}
			});
		},
		methods: {

			toggle(type) {
				_this.bottomPopupShow = true; // 显示
				// this.$refs.modal.hideModal() // 隐藏
			},
			closePopup(e) {
				console.log(e);
				_this.bottomPopupShow = false; // 隐藏
			},

			onChooseAvatar(e) {
				_this.userInfo.avatarUrl = e.avatarUrl;
			},

			chooseSex(index) {
				_this.userInfo.sex = _this.sexActionSheetList[index].text;
			},
			async login(e) {
				uni.login({
					provider: this.provider, //使用微信登录
					onlyAuthorize: true,
					success: function(loginRes) {
						wx_login(loginRes.code).then(res => {
							if (res.code == 200) {
								_this.userInfo = {
									userId: res.data.userId,
									wxOpenId: res.data.wxOpenId,
									avatarUrl: res.data.avatarUrl,
									userName: res.data.userName,
									sex: res.data.sex,
									flag: res.data.flag,
								}
								_this.bottomPopupShow = true; // 显示
								setStorageSync("userId", res.data.userId);
								setStorageSync("userInfo", res.data);
							}
						});
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 自定义内容区样式需自行控制 */
	.fui-custom__wrap {
		padding-top: 30rpx;
		position: relative;
		width: 100%;
		height: 800rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fui-title {
		font-size: 35rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 24rpx;
	}

	.avatarBtn {
		display: flex;
	}
</style>